<template>
  <span>{{ getTitle }}</span>
  <span v-if="getHelpMessage" style="padding-left: 4px;">
    <a-tooltip :class="`${prefixCls}__help`" placement="top">
      <template #title>
        <template v-for="(item, index) in getHelpMessage" :key="index">
          <div style="padding: 2px 0;">{{ item }}</div>
        </template>
      </template>
      <QuestionCircleOutlined />
    </a-tooltip>
  </span>
</template>
<script lang="ts">
  import type { PropType } from 'vue';
  import type { BasicColumn } from '../types/table';
  import { defineComponent, computed } from 'vue';
  import { useDesign } from '@/hooks/web/useDesign';
  import { QuestionCircleOutlined } from '@ant-design/icons-vue';

  export default defineComponent({
    name: 'TableHeaderCell',
    components: {
      QuestionCircleOutlined,
    },
    props: {
      column: {
        type: Object as PropType<BasicColumn>,
        default: () => ({}),
      },
    },
    setup(props) {
      const { prefixCls } = useDesign('basic-table-header-cell');
      const getTitle = computed(() => props.column?.customTitle || props.column?.title);
      const getHelpMessage = computed(() => props.column?.helpMessage);

      return { prefixCls, getTitle, getHelpMessage };
    },
  });
</script>
